<template>
	<el-form size='large' class='login-content-form'>
		<el-form-item class='login-animation1'>
			<el-input type='text' :placeholder="$t('message.mobile.placeholder1')" v-model='phoneNumberLoginForm.phoneNumber'
								clearable autocomplete='off'
								@blur='onVerifyPhone'>
				<template #prefix>
					<i class='iconfont icon-dianhua el-input__icon'></i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class='login-animation2'>
			<el-col :span='15'>
				<el-input type='text' maxlength='6' :placeholder="$t('message.mobile.placeholder2')"
									v-model='phoneNumberLoginForm.smsCode' clearable autocomplete='off'
				>
					<template #prefix>
						<el-icon class='el-input__icon'>
							<ele-Position />
						</el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span='1'></el-col>
			<el-col :span='8'>
				<el-button class='login-content-code' @click='onSendSmsCode'>{{ $t('message.mobile.codeText') }}</el-button>
			</el-col>
		</el-form-item>
		<el-form-item class='login-animation3'>
			<el-button round type='primary' class='login-content-submit' @click='onSmsLogin'>
				<span>{{ $t('message.mobile.btnText') }}</span>
			</el-button>
		</el-form-item>
		<!--		<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>-->
	</el-form>
</template>

<script lang='ts'>

import { computed, defineComponent, reactive, toRefs } from 'vue';
import { PhoneNumberLoginState, userLoginApi } from '/@/api/login';
import { useI18n } from 'vue-i18n';
import { useThemeConfig } from '/@/stores/themeConfig';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import { formatAxis } from '/@/utils/formatTime';
import { ElMessage } from 'element-plus';

import { verifyPhone } from '/@/utils/toolsValidate';
import { Session } from '/@/utils/storage';
import Cookies from 'js-cookie';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { NextLoading } from '/@/utils/loading';

export default defineComponent({
	name: 'loginMobile',
	setup() {
		const { t } = useI18n();
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const route = useRoute();
		const router = useRouter();
		const state = reactive<PhoneNumberLoginState>({
			phoneNumberLoginForm: {
				phoneNumber: '15972740935',
				smsCode: '',
				userName: '',
			},
			loading: {
				signIn: false,
			},
		});
		// 登陆接口
		const loginApi = userLoginApi();

		// 时间获取
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});

		// 手机号码
		const onVerifyPhone = () => {
			let temp = verifyPhone(state.phoneNumberLoginForm.phoneNumber);
			console.log(temp === true);
			if (temp === false) {
				ElMessage.error('手机号不正确');
			}
		};

		// 发送验证码
		const onSendSmsCode = () => {
			// 手机号校验
			console.log('发送手机验证码' + state.phoneNumberLoginForm.phoneNumber);
			loginApi.smsCode(state.phoneNumberLoginForm.phoneNumber)
				.then((res) => {
					//结果成功
					if (res.success === true && res.code === 0) {
						ElMessage.success('发送验证码成功,请注意查收');
					} else {
						ElMessage.error(res.message);
					}
				})
				.catch((error) => {
					//错误
					ElMessage.error(error);
				});
		};

		// 手机号登陆
		const onSmsLogin =   () => {
			state.loading.signIn = true;
			loginApi.smsLogin({
				mobile: state.phoneNumberLoginForm.phoneNumber,
				smsCode: state.phoneNumberLoginForm.smsCode,
			}).then(res => {
				//结果成功
				console.log("res then " + JSON.stringify(res));
				if (/*res.success === true &&*/ res.code === 0) {
					 	handlePhoneLoginSuccess(res);
					return;
				} else {
					console.log("res then else " + JSON.stringify(res));
					ElMessage.error(res.message);
					state.loading.signIn = false;
					return;
				}
			}).catch(res => {
				//错误
				state.loading.signIn = false;
			});
		};

		const handlePhoneLoginSuccess = (res: Object) => {
			state.loading.signIn = true;
			// 存储 token 到浏览器缓存
			console.log(JSON.stringify(res));
			Session.set('token', res.token);
			// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
			// Cookies.set('userName', state.phoneNumberLoginForm.userName);
			Cookies.set('userName','admin');
			if (!themeConfig.value.isRequestRoutes) {
				// 前端控制路由，2、请注意执行顺序
				  initFrontEndControlRoutes();
				  signInSuccess();
			} else {
				// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
				// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
				  initBackEndControlRoutes();
				// 执行完 initBackEndControlRoutes，再执行 signInSuccess
				signInSuccess();
			}
		};

		// 登录成功后的跳转
		const signInSuccess = () => {
			// 初始化登录成功时间问候语
			let currentTimeInfo = currentTime.value;
			// 登录成功，跳到转首页
			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
			if (route.query?.redirect) {
				router.push({
					path: <string>route.query?.redirect,
					query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
				});
			} else {
				router.push('/');
			}
			// 登录成功提示
			// 关闭 loading
			state.loading.signIn = true;
			const signInText = t('message.signInText');
			ElMessage.success(`${currentTimeInfo}，${signInText}`);
			// 添加 loading，防止第一次进入界面时出现短暂空白
			NextLoading.start();
		};

		return {
			onVerifyPhone,
			onSendSmsCode,
			onSmsLogin,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang='scss'>
.login-content-form {
	margin-top: 20px;
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-code {
		width: 100%;
		padding: 0;
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}

	.login-msg {
		color: var(--el-text-color-placeholder);
	}
}
</style>
